<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="isHistory" close-on-click-modal="false" title="历史抄表值" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="img">
      <div class="imgBox" />
      <div class="imgSize">基本信息</div>
    </div>
    <px-table :data="[]" class="equip-table" size="small" height="calc(100vh - 311px)" border>
      <px-table-column
        v-for="(item, index) in baseInfoColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          <span>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
        </template>
      </px-table-column>
    </px-table>
    <div class="img">
      <div class="imgBox" />
      <div class="imgSize">历史抄表值</div>
    </div>
    <px-table :data="[]" class="equip-table" size="small" height="calc(100vh - 311px)" border>
      <px-table-column type="index" label="序号" min-width="60" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in historyColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          <span>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
        </template>
      </px-table-column>
    </px-table>
    <div class="equip-dialog-footer">
      <px-button type="primary" @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["isHistory"]);

const isHistory = computed(() => props.isHistory);

const baseInfoColumns = ref<any>([
  { prop: "eqpName", label: "抄表内容", minWidth: "240", showOverflowTooltip: true },
  { prop: "eqpId", label: "单位", minWidth: "120", showOverflowTooltip: true },
  { prop: "eqpId", label: "最大值", minWidth: "120", showOverflowTooltip: true },
  { prop: "eqpId", label: "最小值", minWidth: "120", showOverflowTooltip: true },
  { prop: "eqpId", label: "设备", minWidth: "240", showOverflowTooltip: true },
  { prop: "eqpId", label: "自动抄表点", minWidth: "300", showOverflowTooltip: true }
]);

const historyColumns = ref<any>([
  { prop: "eqpName", label: "抄表时间", minWidth: "600", showOverflowTooltip: true },
  { prop: "eqpId", label: "抄表值", minWidth: "400", showOverflowTooltip: true }
]);

const openDialog = () => {};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
.img {
  display: flex;
  align-items: center;
  width: 100%;

  /* 垂直居中 */
  height: 22px;

  /* 大盒子的高度 */
  margin-bottom: 8px;
  font-size: 14px;
}

.imgBox {
  width: 3px;
  height: 16px;
  margin-right: 9px;
  background: #3b82f6;
  border-radius: 0 100px 100px 0;
}

.imgSize {
  height: 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: rgb(0 0 0 / 80%);
}
</style>
